<template>
  <div>
    <!-- {{ info.name }}
    {{ info.age }} -->
    {{ name }}
    {{ age }}
    <button @click="changeCount">count++</button>
  </div>
</template>
  
<script>
import { ref, reactive, toRefs, toRef } from "vue";
export default {
  //   setup(props, { attrs, sloat, emit }) {
  //     // reactive定义数组对象都可以
  //     // 也可以让数据变成响应式的
  //     let info = reactive({
  //       name: "杨曼璐",
  //       age: 18,
  //     });
  //     const changeCount = () => {
  //       console.log(info);
  //       info.age += 1;
  //     };
  //     return {
  //       info,
  //       changeCount,
  //     };
  //   },
  setup(props, { attrs, sloat, emit }) {
    // 解构出来的值就不是响应式的了
    let info = reactive({
      name: "杨曼璐",
      age: 18,
    });
    // 用toRefs包裹之后就是响应式的 是ref类型的
    // toRef是一个一个的转 toRefs是一起转
    let { name, age } = toRefs(info);
    // let name = toRef(info, "name");
    // let age = toRef(info, "age");
    const changeCount = () => {
      console.log(name.value, age.value);
      age.value++;
    };
    return {
      name,
      age,
      changeCount,
    };
  },
};
</script>
  
<style scoped lang="scss"></style>  